<template>
<div>
  <cityHeader></cityHeader>
  <citySearch :cityList="cityList"></citySearch>
  <cityList :cityList="cityList" :hotCity="hotCity" :letter="letter"></cityList>
  <alphabet :alphabet="alphabet" @change="handleLetterDisplay"></alphabet>
  <!--选项卡-->
  <!--<div class="tab">-->
    <!--<span>境内</span>-->
    <!--<span class="active">境外.港澳台</span>-->
  <!--</div>-->
</div>
</template>

<script>
import cityHeader from './commponent/cityheader'
import citySearch from './commponent/citySearch'
import cityList from './commponent/list'
import alphabet from './commponent/alphabet'
import axios from 'axios'
export default {
  name: 'city',
  data: function () {
    return {
      cityList: {},
      hotCity: [],
      alphabet: {},
      letter: ''
    }
  },
  components: {
    cityHeader: cityHeader,
    citySearch: citySearch,
    cityList: cityList,
    alphabet: alphabet
  },
  methods: {
    getCityinfo: function () {
      axios.get('/api/city.json')
        .then(this.getCityinfoSucss)
    },
    getCityinfoSucss: function (res) {
      res = res.data
      console.log('请求城市信息为', res.data)
      if (res && res.ret) {
        this.alphabet = res.data.cities
        this.cityList = res.data.cities
        this.hotCity = res.data.hotCities
      }
    },
    handleLetterDisplay: function (letter) {
      this.letter = letter
      // console.log(letter)
    }
  },
  mounted: function () {
    this.getCityinfo()
  }
}
</script>

<style lang="stylus" scoped>
  @import "~@/assets/style/varible.styl"
.tab
  width 100%
  height .88rem
  background $color-blue
  line-height .3rem
  text-align center
  font-size 0
  span
    display inline-block
    padding 2px 20px
    border 1px solid $color-white
    text-align center
    font-size .3rem
    color $color-white
    &:last-child
      border-left none
    &.active
      background $color-white
      color $color-blue
      border-top 1px solid $color-white
      border-bottom 1px solid $color-white
      border-right 1px solid $color-white
.citylistbox
  width 100%
  height auto
  overflow hidden
  .content
    width 100%
    height auto
    overflow hidden
    .title
      line-height .7rem
      font-size .26rem
      background  $color-black2
      padding-left .1rem
   .citylist
     ul
       li
          /*flex 1*/
          box-sizing border-box
          float left
          width 33.333%
          font-size .26rem
          height .8rem
          line-height .8rem
          text-align center
          border-left 1px solid $color-black2
          border-bottom 1px solid $color-black2
          border-right 0
.numbercitylist
  ul
    li
      /*flex 1*/
      box-sizing border-box
      float left
      width 16.666%
      font-size .26rem
      height .8rem
      line-height .8rem
      text-align center
.textcitylist
  ul
    li
      /*flex 1*/
      box-sizing border-box
      float left
      width 25%
      font-size .26rem
      height .8rem
      line-height .8rem
      text-align center
      border-left 1px solid $color-black2
      border-bottom 1px solid $color-black2
      border-right 0
</style>
